<template>
  <div class="comfirmContainer">
    <div class="comfirmAddress">
      <div v-if="currentAddress" class="haveAddressDiv" @click="toAddress">
        <div class="reciverDiv">
          <div class="reciverName">收货人：<span>{{currentAddress.name}}</span></div>
          <div class="reciverPhone">{{currentAddress.phone}}</div>
        </div>
        <div class="reciverAddressDiv" >
          <p class="reciverAddress">收货地址：
          <span>
          {{currentAddress.provinceName}}{{currentAddress.cityName}}{{currentAddress.districtName}}
          {{currentAddress.street}}
          </span>
          </p>
          <p class="reciverRighticon"><img src="/static/images/pay/righticon.png"></p>
        </div>
      </div>
      <div v-else class="noAddressDiv" @click="toAddress">
        <div class="noAddress">
          <div class="noAddressImg"><div><img src="/static/images/pay/noaddress.png"></div></div>
          <p class="noAddressTxt">请添加收货地址~</p>
        </div>
      </div>
    </div>
    <div class="accountShopCar">
      <div class="accountShopCarTitle">
        <div class="accountShopCarTitleImg"><img src="/static/images/shopcar/store.png"></div>
        <p>我的购物结算</p>
      </div>
      <pay-goods-item v-for="(item, index) in currentLineItems"
      :key="index"
      :productItem = "item"
      ></pay-goods-item>
    </div>
    <div class="orderTotaolPrice">
      <div>订单总价：</div>
      <p>￥{{totalPriceToFixed}}</p>
    </div>

    <!-- <div class="orderHandel" v-if="userInfo.isAgent">
      <div class="isMyselfPick">
        <div class="isMyselfPickTxt">是否推广单：</div>
        <div class="isMyselfPickSwitch">
        <div class="body-view">
            <switch @change="switchChange"/>
        </div>
        </div>
      </div>
    </div> -->
    
    <div class="orderHandel" v-if="isInputWx">
      <div class="expressDiv">
        <div class="expressTxt">微信号</div>
        <div class="expressMoney">
          <input type="text" placeholder="请填写你的微信号" v-model="wxAccount">
        </div>
      </div>
    </div>
    <div class="orderHandel" v-if="false">
      <div class="expressDiv">
        <div class="expressTxt">快递费：</div>
        <div class="expressMoney">￥：0.00</div>
      </div>
    </div>
    <div class="payWay">
      <h3>支付方式</h3>

      <div class="payWayDiv payWayDivFist" v-for="(item,index) of payTypeList" :key="index" v-if="item.ishow" @click="selectPayWay(index,item.id)">
        <div class="payIcon"><img :src="item.icon"></div>
        <p>{{item.name}}</p>
        <div class="paySelect">
          <img src="/static/images/pay/checkbox-active.png" v-if="index == payTypeIndex">
          <img src="/static/images/pay/checkbox.png" v-else>
        </div>
      </div>

      <!-- <div class="payWayDiv" @click="selectPayWay">
        <div class="payIcon"><img src="/static/images/pay/paymoney.png"></div>
        <p>美豆支付</p>
        <div class="paySelect">
          <img src="/static/images/pay/checkbox.png" v-if="paiweixin">
          <img src="/static/images/pay/checkbox-active.png" v-else>
        </div>
      </div> -->

    </div>
    <div class="comfirmFooter">
      <div class="comfirmFooterMoney">
        <div>付款金额：</div>
        <p>￥{{totalPriceToFixedAll}}</p>
      </div>
      <div class="comfirmFooterBtn" @click="confirmPayFor">确定支付</div>
    </div>
  </div>
</template>

<script>
  import payGoodsItem from '@/components/order/pay-goods-item.vue'
  import calUserDiscountMixin from '@/utils/calUserDiscount'
  import {mapGetters} from 'vuex'
  export default {
    mixins: [calUserDiscountMixin],
    components: {
      payGoodsItem
    },
    data() {
      return {
        bargainOrderOrNot: false,
        orderNo: '',//分享后的订单号，需要去判断存在还是不存在
        isClickSwitch: true, //默认是需要运费的
        expressMoney: 8.00,//默认运费8快
        switchState: false, //是否打开开关，默认没打开
        paiweixin: true,//选择支付方式默认的是微信支付
        integral: 0,//获取到用户积分
        isInputWx: false,//是否填写微信号
        wxAccount: "",//微信号码
        isParentId:"",//父级的id
        payTypeId:0,//0微信全额支付，1美豆全额支付，2部分现金部分美豆支付
        payTypeIndex:0,
        payTypeList:[],
        isCancel:null,
      }
    },
    onLoad(){
      var isCancel = wx.getStorageSync('isCancel');
      console.log(isCancel)
      this.isCancel = isCancel
      this.setPayType()
      this.isParentId  = wx.getStorageSync('parentId')
      console.log('购物页面的currentLineItems',this.currentLineItems)
      this.currentLineItems.map((item,index)=>{
        this.currentLineItems[index].selected = wx.getStorageSync('selectIdNum')
      })
      // this.currentLineItems.selected = wx.getStorageSync('selectIdNum')
      console.log('currentLineItems的值',this.currentLineItems)
    },
    onShow() {
      this.currentLineItems.some((item)=>{  //单纯针对 点石成金 的商品
        if(item.productId == 544){
          return this.isInputWx = true
        }else{
          return this.isInputWx = false
        }
      })
      this.$http.get('address/default').then((data)=>{ //默认地址
        this.$store.dispatch('setCurrentAddress', data.data.data) 
      })
      this.updateUserInfo() //获取用户积分

    },
    // onUnload(){
    //   this.$store.dispatch("clearCurrentProductCar",this.selectedLineItems)
    // },
    mounted() {
      this.expressMoney = 8;
      this.isClickSwitch = true;
    },
    computed : {
      ...mapGetters({
        currentProductCar: 'currentProductCar',
        currentAddress: 'currentAddress',//默认地址
        userInfo: 'userInfo',//用户数据
        product: 'currentProduct'
      }),
      selectedLineItems () {
        console.log('购物车已经有的商品',this.currentProductCar)
        if (this.currentProductCar == null) {
          return []
        }
        return this.currentProductCar.filter((lineItem) => {
          if (lineItem.isSelected) {
            return true
          } else {
            return false
          }
        })
      },
      currentLineItems () {//选择的当前的商品
        return this.selectedLineItems
      },
      totalPrice () {
        return this._totalPrice(this.currentLineItems)
      },
      totalPriceToFixed () {
        return this.totalPrice.toFixed(2)
      },
      totalPriceToFixedAll () {
        return (parseFloat(this.totalPriceToFixed)).toFixed(2)
      },
      getLineItems(){ //获取结算购物车中的商品的lineItemId
        let lineItemIds = [];
        this.currentLineItems.map((item) =>{
          let lineItemId = {
            lineItemId: item.lineItemId
          }
          lineItemIds.push(lineItemId)
        })
        return lineItemIds
      }
    },
    methods: {
      setPayType(){
        let payTypeLists = [
            {name:"微信支付",icon:"/static/images/pay/payweixin.png",id:0,ishow:true},
            {name:"美豆支付",icon:"https://static.music.daoyintech.com/beans.png",id:1,ishow:true},
            {name:"美豆抵扣",icon:"https://static.music.daoyintech.com/bean.png",id:2,ishow:true},
        ]
        if(this.isCancel){
          payTypeLists[2].ishow = false
        }else{
          payTypeLists[1].ishow = false
        }
        this.payTypeList = payTypeLists
      },
      selectPayWay(index,id){//选择支付的方式
        // this.paiweixin = !this.paiweixin
        this.payTypeIndex = index
        this.payTypeId = id
      },
      updateUserInfo(){//用户信息-获取积分
        this.$http.get('integral/my/integral','','',false).then((res)=>{ 
          this.integral = res.data.data.integral
        })
      },
      switchChange (e){
        this.switchState = e.mp.detail.value;
        if(this.switchState){
          this.isClickSwitch = false
          this.expressMoney = 0.00
        }else{
          this.isClickSwitch = true
          this.expressMoney = 8.00
        }
      },
      toAddress() {
        const url = "../address/main"
        wx.navigateTo({ url })
      },
      confirmPayFor(){
        if(this.payTypeId == 0){//现金支付
          this.quicklyBuyPayfor()
        }else if(this.payTypeId == 1){//美豆支付
          if(this.integral >= this.totalPriceToFixedAll*10 ){
            this.payforRmoney()
          }else{
            this.wxAlert("美豆不足，请选择其他支付")
          }
        }else{//美豆抵扣支付
          this.dkPay()
        }
      },
      payforRmoney(){//美豆支付
        let currentAddress = this.currentAddress
        if(!this.isInputWx){ //不填微信号的时候，收货地址就必须填写
          if (!this.currentAddress) {
            this.wxAlert('请选择收货地址')
            return
          }
        }
        if(this.isInputWx){
          if (this.wxAccount.trim() == "") {
            this.wxAlert('请填写你的微信号')
            return
          }
        }
        let payfordata = {
          "addressId": this.currentAddress ? this.currentAddress.id : "", //地址id
          "isMyselfPick": this.switchState,  //是否自提
          "isUseIntegral": true, //是否使用美豆
          "items": this.getLineItems, //获取结算购物车中的商品的lineItemId
          "wxAccount": this.wxAccount,
          "parentUnionId":this.isParentId,
          "isDiscount":false
        }
        this.$http.post('order/new',payfordata,"application/json").then((data)=>{ 
          if(data.data.code === 0){
            let allIntegral = data.data.data
            const url = `../pay-success/main?allIntegral=${allIntegral}`;
            wx.redirectTo({ url })
          }else{
            this.wxAlert(data.data.msg)
          }
        })
      },
      //美豆抵扣支付
      dkPay(){
        let currentAddress = this.currentAddress
        if(!this.isInputWx){ //不填微信号的时候，收货地址就必须填写
          if (!this.currentAddress) {
            this.wxAlert('请选择收货地址')
            return
          }
        }
        if(this.isInputWx){
          if (this.wxAccount.trim() == "") {
            this.wxAlert('请填写你的微信号')
            return
          }
        }
        let payfordata = {
          "addressId": this.currentAddress ? this.currentAddress.id : "", //地址id
          "isMyselfPick": this.switchState,  //是否自提
          "isUseIntegral": false, //是否使用美豆
          "items": this.getLineItems, //获取结算购物车中的商品的lineItemId
          "wxAccount": this.wxAccount,
          "parentUnionId":this.isParentId,
          "isDiscount":true
        }
        this.$http.post('order/new',payfordata,"application/json").then((data)=>{ 
          if(data.data.code === 0){
            let needPayDate = data.data.data;
            if(this.currentLineItems.length>0){
              this.wxPayFor(needPayDate)
            }else{
              this.wxAlert('没有商品')
            } 
          }else{
            this.wxAlert(data.data.message)
          }
        })
      },
      quicklyBuyPayfor(){ //微信支付
        let currentAddress = this.currentAddress
        if(!this.isInputWx){ //不填微信号的时候，收货地址就必须填写
          if (!this.currentAddress) {
            this.wxAlert('请选择收货地址')
            return
          }
        }
        if(this.isInputWx){
          if (this.wxAccount.trim() == "") {
            this.wxAlert('请填写你的微信号')
            return
          }
        }
        let payfordata = {
          "addressId": this.currentAddress ? this.currentAddress.id : "", //地址id
          "isMyselfPick": this.switchState,  //是否自提
          "isUseIntegral": false, //是否使用美豆
          "items": this.getLineItems, //获取结算购物车中的商品的lineItemId
          "wxAccount": this.wxAccount,
          "parentUnionId":this.isParentId,
          "isDiscount":false
        }
        this.$http.post('order/new',payfordata,"application/json").then((data)=>{ 
          if(data.data.code === 0){
            let needPayDate = data.data.data;
            if(this.currentLineItems.length>0){
              this.wxPayFor(needPayDate)
            }else{
              this.wxAlert('没有商品')
            } 
          }else{
            this.wxAlert(data.data.msg)
          }
        })
      },
      wxPayFor(wxData){ //唤起微信的支付
        wx.requestPayment({
            'timeStamp': wxData.timeStamp,
            'nonceStr': wxData.nonceStr,
            'package': wxData.package,
            'signType': wxData.signType,
            'paySign': wxData.paySign,
            'success': (res) => {
              //此处是生成了订单，购物车的商品就应该删除
              this.$store.dispatch("clearCurrentProductCar",this.selectedLineItems) //清除当前选中的商品
              console.log("订单支付成功")
              const url = `../allorders/main?aid=${1}`;
              wx.redirectTo({ url })
            },
            'fail': (res) =>{
              //此处是生成了订单，购物车的商品就应该删除
              this.$store.dispatch("clearCurrentProductCar",this.selectedLineItems) //清除当前选中的商品
              console.log("订单支付失败")
              const url = `../allorders/main?aid=${0}`;
              wx.redirectTo({ url })
            }
          })
      },
      wxAlert(txt){
        wx.showToast({
            title: txt,
            icon: "none",
            duration: 3000,
            mask: true
        })
      }
    }
  }
</script>

<style scoped>
.comfirmContainer{
  background: #efeff4;
  position: absolute;
  top: 0;
  width: 100%;
  height: auto;
}
.comfirmContainer .comfirmAddress{
  background: #fff;
  border-top: 1rpx solid #efeff4;
}
.comfirmContainer .comfirmAddress .haveAddressDiv{
  height: 204rpx; 
  padding: 0 24rpx;
}
.comfirmContainer .comfirmAddress .haveAddressDiv .reciverDiv {
  font-size: 28rpx;
  color: #2a2a2a;
  display: flex;
  height: 68rpx;
  align-items: center;
  margin-top: 25rpx;
}
.comfirmContainer .comfirmAddress .haveAddressDiv .reciverDiv .reciverName{
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-right: 10rpx;
}
.comfirmContainer .comfirmAddress .haveAddressDiv .reciverAddressDiv{
  display: flex;
  align-items: center;
  margin-top: 5rpx;
}
.comfirmContainer .comfirmAddress .haveAddressDiv .reciverAddressDiv .reciverAddress{
  font-size: 30rpx;
  color: #9e9e9e;
  line-height: 45rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  flex: 1;
  margin-right: 30rpx;
}
.comfirmContainer .comfirmAddress .haveAddressDiv .reciverAddressDiv .reciverAddress span{
  word-break: break-all;
}
.comfirmContainer .comfirmAddress .haveAddressDiv .reciverAddressDiv .reciverRighticon{
  width: 17rpx;
  height: 30rpx;
}
.comfirmContainer .comfirmAddress .haveAddressDiv .reciverAddressDiv .reciverRighticon img{
  width: 100%;
  height: 100%;
  display: block;
}
.comfirmContainer .comfirmAddress .noAddressDiv{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 204rpx;
}
.comfirmContainer .comfirmAddress .noAddressDiv .noAddress .noAddressImg{
  display: flex;
  justify-content: center;
}
.comfirmContainer .comfirmAddress .noAddressDiv .noAddress .noAddressImg>div{
  width: 74rpx;
  height: 82rpx;
}
.comfirmContainer .comfirmAddress .noAddressDiv .noAddress .noAddressImg img{
  width: 100%;
  height: 100%;
}
.comfirmContainer .comfirmAddress .noAddressDiv .noAddress .noAddressTxt{
  font-size: 26rpx;
  color: #2a2a2a;
  margin-top: 15rpx;
}
.comfirmContainer .accountShopCar{
  margin-top: 20rpx;
  background: #fff;
}
.comfirmContainer .accountShopCarTitle{
  display: flex;
  align-items: center;
  height: 90rpx;
  font-size: 28rpx;
  color: #9e9e9e;
  padding: 0 30rpx;
  border-bottom: 1rpx solid #efeff4;
}
.comfirmContainer .accountShopCarTitle .accountShopCarTitleImg{
  width: 32rpx;
  height: 32rpx;
  margin-right: 20rpx;
}
.comfirmContainer .accountShopCarTitle .accountShopCarTitleImg img{
  width: 100%;
  height: 100%;
}
.comfirmContainer .orderTotaolPrice{
  background: #fff;
  margin-top: 20rpx;
  padding: 0 30rpx;
  height: 106rpx;
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #000;
}
.comfirmContainer .orderTotaolPrice p{
  flex: 1;
  font-size: 30rpx;
  color: #e38a8a;
  display: flex;
  justify-content: flex-end;
}
.comfirmContainer .orderHandel {
  background: #fff;
  margin-top: 20rpx;
  padding: 20rpx 0;
  font-size: 28rpx;
  color: #000;
}
.comfirmContainer .orderHandel>div {
  display: flex;
  align-items: center;
  height: 66rpx;
  padding: 0 30rpx;
}
.comfirmContainer .orderHandel>div.isMyselfPick{
  padding-right: 15rpx;
}
.comfirmContainer .isMyselfPick .isMyselfPickSwitch{
  flex: 1;
  display: flex;
  justify-content: flex-end;
}
.comfirmContainer .expressDiv .expressMoney{
  flex: 1;
  font-size: 30rpx;
  color: #e38a8a;
  display: flex;
  justify-content: flex-end;
}
.comfirmContainer .expressDiv .expressMoney input{
  flex: 1;
  margin-left: 20rpx;
  text-align: right;
  color: #2a2a2a;
}
.comfirmContainer .payWay{
  background: #fff;
  margin-top: 20rpx;
  margin-bottom: 115rpx;
}
.comfirmContainer .payWay h3{
  height: 105rpx;
  line-height: 105rpx;
  font-size: 30rpx;
  color: #000000;
  padding: 0 30rpx;
}
.comfirmContainer .payWay .payWayDiv{
  padding: 0 30rpx;
  display: flex;
  align-items: center;
  height: 100rpx;
}
.comfirmContainer .payWay .payWayDivFist{
  border-bottom: 1px solid #efeff4;
  border-top: 1px solid #efeff4;
}
.comfirmContainer .payWay .payWayDiv .payIcon{
  width: 44rpx;
  height: 44rpx;
}
.comfirmContainer .payWay .payWayDiv .payIcon img{
  width: 100%;
  height: 100%;
  display: block;
}
.comfirmContainer .payWay .payWayDiv .paySelect{
  width: 32rpx;
  height: 32rpx;
}
.comfirmContainer .payWay .payWayDiv .paySelect img{
  width: 100%;
  height: 100%;
  display: block;
}
.comfirmContainer .payWay .payWayDiv p{
  font-size: 28rpx;
  color: #000;
  flex: 1;
  margin: 0 20rpx;
}
.comfirmContainer .comfirmFooter{
  background: #fff;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 95rpx;
  border-top: 1rpx solid #efeff4;
  display: flex;
  z-index: 10;
}
.comfirmContainer .comfirmFooter .comfirmFooterMoney{
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 30rpx;
  color: #000000;
  padding-left: 30rpx;
}
.comfirmContainer .comfirmFooter .comfirmFooterMoney p{
  font-size: 36rpx;
  color: #e38a8a;
}
.comfirmContainer .comfirmFooter .comfirmFooterBtn{
  font-size: 36rpx;
  color: #fff;
  background: #e1c7d2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 80rpx;
}
</style>
